import * as THREE from 'three'
import createApp from '../../core'

function createArrowHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(0, 0, 100)
  camera.lookAt(scene.position)

  addArrow(scene)

  gui.add(data, 'length', 0, 50).onChange(() => {
    addArrow(scene)
  })
  gui.addColor(data, 'hex').onChange(() => {
    addArrow(scene)
  })
  gui.add(data, 'headLength', 0, 50).onChange(() => {
    addArrow(scene)
  })
  gui.add(data, 'headWidth', 0, 50).onChange(() => {
    addArrow(scene)
  })
}
const data = {
  length: 10,
  hex: 0xff0000,
  headLength: 1,
  headWidth: 1
}

function addArrow (scene: THREE.Scene) {
  const children = [...scene.children]
  children.forEach(child => {
    scene.remove(child)
  })
  const dir = new THREE.Vector3(10, 10, 10)
  dir.normalize()
  const origin = new THREE.Vector3(0, 0, 0)
  const arrowHelper = new THREE.ArrowHelper(dir, origin, data.length, data.hex, data.headLength, data.headWidth)
  scene.add(arrowHelper)
}

export {
  createArrowHelper
}
